<template>
  <div class="reply">
    <div class="template">
      <h2 class="title">
        快捷回复语设置
      </h2>
      <ul class="temContent">
        <li v-for='(item,i) in replyList' :key='item.id'>
          <div>
            <span class="label">回复语{{i+1}}:</span>
            <span class="reply-content">{{item.content}}</span>
          </div>
          <div v-if="i>2">
            <el-button class="update" @click="update(item)">修改</el-button>
            <el-button class="del" @click="del(item.id)">删除</el-button>
          </div>
        </li>
      </ul>
      <div v-if="replyList.length<8" class="inputBox">
        <span class="diyLabel"><i class="el-icon-sunny"></i>添加回复语最高字数200个。</span>
        <el-button type="primary" @click="add">添加</el-button>
      </div>
      <div v-if='edit' class="edit">
        <el-input type="textarea" :maxlength='200' :rows="4" placeholder="请输入内容" v-model="content">
        </el-input>
        <div class="inputBox">
          <div class="num">{{num}}/200</div>
          <div class="btnBox">
            <el-button type="text" @click="close">取消</el-button>
            <el-button type="primary" @click="save">保存</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { commonList, companyDel, commonSave, commonEdit, commonUpdate } from '../../../../api/commonWords'

export default {
  name: 'reply',
  data () {
    return {
      replyList: [],
      edit: false,
      content: '',
      item: '',
    }
  },
  created () {
    this.getList()
  },
  computed: {
    // 监听常用语数量
    num () {
      return this.content.length
    }
  },
  methods: {
    // 获取常用语列表
    getList () {
      commonList().then(res => {
        if (res.success) {
          this.replyList = res.data || [];
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 打开新增常用语
    add () {
      if (this.edit) {
        this.$message.error('请先保存或取消操作！')
      } else {
        this.edit = true;
      }
    },
    // 打开编辑常用语
    update (item) {
      if (this.edit) {
        this.$message.error('请先保存或取消操作！')
      } else {
        this.item = item
        commonEdit(item.id).then(res => {
          if (res.success) {
            this.edit = true;
            this.content = res.data.content || ''
          } else {
            this.$message.error(res.msg)
          }
        })
      }
    },
    // 删除常用语
    del (id) {
      this.$confirm('您要删除回复语，删除后不可恢复，是否确定操作？', '信息提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        callback: action => {
          if (action === 'confirm') {
            // let formData = new FormData();
            // formData.append('ids', JSON.stringify(query))'1,2,32,2'
            companyDel(id).then(res => {
              if (res.success) {
                this.$message.success('删除成功')
                this.getList();
              } else {
                this.$message.error(`${res.msg}`)
              }
            })
          }
        }
      })
    },
    // 关闭常用语编辑模块
    close () {
      this.edit = false;
      this.content = '';
      this.item = null
    },
    // 保存常用语
    save () {
      if (this.content) {
        if (this.item) {
          let query = {
            title: this.item.title,
            id: this.item.id,
            content: this.content
          }
          commonUpdate(query).then(res => {
            if (res.success) {
              this.close();
              this.$message.success('修改成功！')
              this.getList()
            } else if (res.code == 490) {
              this.close();
              this.$message.error(res.msg)
            } else {
              this.$message.error(res.msg)
            }
          })
        } else {
          let query = {
            title: '回复语' + (this.replyList.length + 1),
            content: this.content
          }
          commonSave(query).then(res => {
            if (res.success) {
              this.close();
              this.$message.success('添加成功！')
              this.getList()
            } else {
              this.$message.error(res.msg)
            }
          })
        }
      } else {
        this.$message.error('请输入快捷回复内容！')
      }
    }
  }
}
</script>

<style lang="css" scoped>
.reply {
    margin-top: 20px;
    padding: 23px 43px;
}
.template {
    border-bottom: 1px solid rgba(232, 232, 232, 1);
}
h2 {
    height: 20px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 600;
    line-height: 20px;
    color: rgba(34, 34, 34, 1);
    opacity: 1;
}
h2:after {
    display: block;
    content: '';
    width: 28px;
    height: 2px;
    margin-top: 4px;
    background: rgba(24, 147, 252, 1);
    opacity: 1;
    border-radius: 2px;
}
.temContent li {
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: rgba(34, 34, 34, 1);
    opacity: 1;
    display: flex;
    justify-content: space-between;
    line-height: 49px;
    border-bottom: 1px solid rgba(232, 232, 232, 1);
}
.btnBox {
    line-height: 49px;
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
}
.btnBox .el-button {
    width: 94px;
    height: 24px;
    font-size: 12px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    line-height: 0;
    background: rgba(24, 147, 252, 1);
    opacity: 1;
}
.label {
    width: 100px;
    display: inline-block;
}
.inputBox {
    line-height: 49px;
    height: 49px;
    /* margin-top: 20px;
    margin-bottom: 20px; */
    display: flex;
    justify-content: space-between;
}
.inputBox .el-button {
    margin-top: 12px;
    font-size: 12px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 0;
    color: rgba(255, 255, 255, 1);
    width: 94px;
    height: 24px;
    background: rgba(24, 147, 252, 1);
    opacity: 1;
}
.temContent /deep/ .update {
    cursor: pointer;
    padding: 0;
    margin-right: 8px;
    text-align: center;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 0;
    color: rgba(0, 147, 255, 1);
    width: 48px;
    height: 22px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(24, 147, 252, 1);
    opacity: 1;
    border-radius: 2px;
}
.temContent /deep/ .del {
    cursor: pointer;
    padding: 0;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 0;
    color: rgba(253, 78, 64, 1);
    width: 48px;
    height: 22px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(253, 78, 64, 1);
    opacity: 1;
    border-radius: 2px;
}
.diyLabel {
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: rgba(117, 117, 117, 1);
    opacity: 1;
}

.template /deep/ .el-textarea__inner {
    width: 1112px;
    height: 114px;
    background: rgba(248, 248, 248, 1);
    opacity: 1;
}
.num {
    width: 37px;
    /* height: 15px; */
    margin-top: 12px;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 49px;
    color: rgba(117, 117, 117, 1);
    opacity: 1;
}
.el-icon-sunny {
    margin-right: 9px;
}
.edit {
    padding-bottom: 15px;
}
.reply-content {
    width: 880px;
    vertical-align: top;
    display: inline-block;
}
</style>